<!--
 @description 客户-基础信息
 @fileName BasicInfo.vue
 @author zengqiongying
 @created 2022/11/11 13:16:25
-->
<template>
  <div class="basic-info">
    <div class="group-box">
      <div class="group-title">
        <span>基本信息</span>
        <img class="icon-edit" src="@/assets/img/icon-edit.png" @click="handleEdit">
      </div>
      <div class="group-content">
        <!-- <Cell title="姓名" readonly :value="detail.name" />
        <Cell title="手机" readonly :value="detail.phone" /> -->
        <Cell title="性别" default-value="--" dict-type-code="CRM_GENDER" readonly :value="detail.gender" />
        <Cell title="年龄段" default-value="--" dict-type-code="CRM_AGE_LEVEL" readonly :value="detail.ageGroup" />
        <Cell title="第二联系方式" default-value="--" readonly :value="detail.backupContact " />
        <Cell title="职业" default-value="--" readonly :value="detail.profession" />
        <Cell title="生日" default-value="--" readonly :value="detail.birthday " />
        <Cell title="微信号" default-value="--" readonly :value="detail.wechatNumber " />
        <Cell title="客户来源" default-value="--" readonly :value="disCustomerSource" />
        <Cell title="职业" default-value="--" readonly :value="detail.profession" />
        <Cell title="所在地区" default-value="--" readonly :value="`${detail.provinceName || ''}${detail.cityName || ''}${detail.districtsName || ''}${detail.streetName || ''}`" />
        <Cell title="详细地址" default-value="--" readonly :value="detail.detailedAddress" />
        <Cell title="所属门店" default-value="--" readonly :value="detail.shopDeptName" />
        <Cell title="备注" default-value="--" readonly :value="detail.comments" />
        <Cell title="客服备注" default-value="--" readonly :value="detail.ccRemarks" />
        <Cell title="语音备注" custom readonly>
          <FieldAudio v-model="voiceRemark" read-only title="语音备注" />
        </Cell>
      </div>
    </div>
    <div class="group-box">
      <div class="group-title">需求信息</div>
      <div class="group-content">
        <Cell title="意向品类" default-value="--" dict-type-code="CRM_CATEGORY_SELECTION" readonly :value="detail.categorySelection" />
        <Cell title="需求空间" default-value="--" dict-type-code="CRM_DEMAND_SPACE" readonly :value="detail.demandSpace" />
        <Cell title="风格偏好" default-value="--" dict-type-code="ADS_SPACE_PREFERENCE_STYLE" readonly :value="detail.preferenceStyle" />
        <Cell title="客户预算" default-value="--" dict-type-code="CRM_CUSTOMER_BUDGET" readonly :value="detail.customerBudget" />
        <Cell title="是否进店" default-value="--" dict-type-code="CRM_COMMON_BOOLEAN" readonly :value="detail.isEnterStore?'是':'否'" />
        <Cell v-if="Number(detail.isEnterStore)===1" title="进店次数" default-value="--" readonly :value="detail.enterStoreTimes" />
      </div>
    </div>
    <div class="group-box">
      <div class="group-title">详细信息</div>
      <div class="group-content">
        <Cell title="客户编码" default-value="--" readonly :value="detail.clueCustomerCode" />
        <Cell title="邀约方式" dict-type-code="CRM_CUSTOMER_INTENTION" default-value="--" readonly :value="detail.inviteWay" />
        <Cell title="预约测量时间" default-value="--" readonly :value="detail.appointmentTime" />
        <Cell title="小区" default-value="--" readonly :value="detail.housingEstate" />

        <Cell title="户型" dict-type-code="CRM_HOUSE_MODEL" default-value="--" readonly :value="detail.housingType" />
        <Cell title="房屋类型" dict-type-code="CRM_HOUSE_TYPE" default-value="--" readonly :value="detail.housingStyle" />
        <Cell title="房屋概况" dict-type-code="CRM_HOUSE_SITUATION" default-value="--" readonly :value="detail.housingOverview" />
        <Cell title="房屋面积" dict-type-code="CRM_HOUSE_AREA" default-value="--" readonly :value="detail.housingArea" />
        <Cell title="装修预算" dict-type-code="CRM_Decoration_Budget" default-value="--" readonly :value="detail.decorationBudget" />
        <Cell title="装修阶段" dict-type-code="CRM_DECORATION_PHASE" default-value="--" readonly :value="detail.decorationStage" />
        <Cell title="施工进度" dict-type-code="CRM_DECORATION_PROGRESS" default-value="--" readonly :value="detail.constructionProgress" />
        <Cell title="装修风格" dict-type-code="CRM_Decoration_Style" default-value="--" readonly :value="detail.decorationStyle" />
        <Cell title="交房时间" default-value="--" readonly :value="detail.acceptanceTime" />
        <template v-if="visible">
          <Cell title="电商客户ID" default-value="--" readonly :value="detail.consumerEcId" />
          <Cell title="广告计划" default-value="--" readonly :value="detail.advertisementPlanName" />
          <Cell title="老客户姓名" default-value="--" readonly :value="detail.referrerName" />
          <Cell title="老客户电话" default-value="--" readonly :value="detail.referrerPhone" />
          <Cell title="跟进销售" default-value="--" readonly :value="clueFollowUpUsers" />
          <Cell title="最新跟进时间" default-value="--" readonly :value="detail.lastFollowupTime" />
          <Cell title="建档时间" default-value="--" readonly :value="detail.filingTime" />
          <Cell title="推荐人" default-value="--" readonly :value="detail.recommender" />
          <Cell title="流失原因" default-value="--" readonly dict-type-code="CRM_FAILURE_REASON" :value="detail.failureReason" />
          <Cell title="跟进内容" is-column default-value="--" readonly :value="detail.lastFollowupContent" />
          <Cell title="订单商品名称" is-column default-value="--" readonly :value="detail.orderProductName" />
          <Cell title="买家备注" is-column default-value="--" readonly :value="detail.consumerEcRemarks" />
          <Cell title="分配备注" is-column default-value="--" readonly :value="detail.ccRemarks" />

          <!-- <Cell title="申请设计师" readonly :value="detail.recommendDesignerName" />
          <Cell title="量尺时间" readonly :value="detail.expectMeasuredTime" />
          <Cell title="套餐" readonly :value="detail.setMealName" />
          <Cell title="施工进度" readonly :value="detail.constructionProgress" /> -->
        </template>
      </div>
      <div class="btn-more" @click="handlerControlVisible">{{ visible?'收起':'展开' }}</div>
    </div>

    <div class="group-box">
      <div class="group-title">意向案例</div>
      <div class="group-content">
        <CaseItem :case-data="intentionCaseData" />
      </div>
    </div>

    <div class="group-box">
      <div class="group-title">推荐案例</div>
      <div class="group-content">
        <CaseItem :case-data="caseData" />
      </div>
    </div>

  </div>
</template>

<script>
import Cell from '@/components/ListCell'
import FieldAudio from '@/components/FieldAudio'
import mixin from './mixin'
import { getDictList } from '@/apis/dataDict'
import { queryRecommendScheme, intentionScheme } from '@/apis/scheme'
import CaseItem from './CaseItem'
// import {getDisDetail} from '@/apis/customer'
export default {
  name: 'CustomerBasicInfo',
  components: {
    Cell, FieldAudio, CaseItem
  },
  mixins: [mixin],
  data() {
    return {
      DIS_CUSTOMER_PRIMARY_SOURCE: [],
      DIS_CUSTOMER_SECONDARY_SOURCE: [],
      intentionCaseData: [],
      caseData: [],
      visible: false,
      nextId: ''
    }
  },

  computed: {
    disCustomerSource() {
      const disCustomerFirstSource = this.DIS_CUSTOMER_PRIMARY_SOURCE.find(e => e.dictCode === this.detail.disCustomerFirstSource)
      const disCustomerSecondSource = this.DIS_CUSTOMER_SECONDARY_SOURCE.find(e => e.dictCode === this.detail.disCustomerSecondSource)
      return `${disCustomerFirstSource ? disCustomerFirstSource.dictName : ''}-${disCustomerSecondSource ? disCustomerSecondSource.dictName : (this.detail.disCustomerSecondSource || '')}`
    },
    voiceRemark() {
      if (this.detail.voiceRemark && this.detail.voiceRemark.attachmentPath) {
        return this.$formatURL(this.detail.voiceRemark.attachmentPath)
      }
      return ''
    },
    clueFollowUpUsers() {
      if (this.detail && this.detail.clueFollowUpUsers && this.detail.clueFollowUpUsers.length >
      0) {
        const list = this.detail.clueFollowUpUsers.map(v => {
          return `${v.userTrueName}(${v.employeePhone})`
        })
        return list.join(',')
      } else {
        return '--'
      }
    }
  },

  created() {
    this.getDataDict()
    this.getQueryRecommendScheme()
    this.getIntentionScheme()
  },
  activated() {},

  mounted() {},

  methods: {
    initData() {

    },
    handlerControlVisible() {
      this.visible = !this.visible
    },
    getDataDict() {
      getDictList('DIS_CUSTOMER_PRIMARY_SOURCE').then(res => {
        this.DIS_CUSTOMER_PRIMARY_SOURCE = res
      })
      getDictList('DIS_CUSTOMER_SECONDARY_SOURCE').then(res => {
        this.DIS_CUSTOMER_SECONDARY_SOURCE = res
      })
    },
    getQueryRecommendScheme() {
      const data = new FormData()
      const paramsRaw = {
        spaceCode: this.detail.demandSpace ? this.detail.demandSpace.split(',') : [],
        styleCode: this.detail.preferenceStyle, //	crm风格 ADS_SPACE_PREFERENCE_STYLE
        haveRoam: 2,	// 是否含有全屋漫游 0,否 1，是 2,全部
        orderType: 2 //	排序规则 1、时间排序2、最多点赞数3、最多浏览数
        // page: 1, //	i页码
        // rows: 6 //	每页显示条数
      }
      data.append('paramsRaw', JSON.stringify(paramsRaw))
      data.append('page', 1)
      data.append('rows', 6)
      return queryRecommendScheme(data).then(res => {
        this.caseData = res.data.records
      })
    },
    getIntentionScheme() {
      const data = {
        clueCustomerId: this.detail.id,	// 线索客户id
        objectType: 'clueCustomer'	// 关联对象类型： clueCustomer=线索客户 opty=商机
        // optyId	string商机id
      }
      return intentionScheme(data).then(res => {
        this.intentionCaseData = res.data
      })
    },
    handleEdit() {
      this.$router.push({
        path: '/customer/add',
        query: {
          id: this.clueCustomerId,
          // type: this.customerPoolType
          type: (this.detail && this.detail.clueCustomerType === 'IntentionalCustomer') ? 2 : 1
        }
      })
    }
  }
}

</script>
<style lang='less' scoped>
  .basic-info{
    padding: 16px;
  }
  .group-box{
    box-sizing: border-box;
    background: #F8F8FA;
    border-radius: 8px;
    margin-bottom: 16px;
    /deep/.c-cell{
      background: #F8F8FA;
      padding: 6px 16px;
      min-height:auto;
      &::after{
        border: 0;
      }
      .label{
        color: #111111;
        font-size: 12px;
        font-weight: bold;
      }
      .value{
        color: #7D8091;
        font-size: 12px;
      }
    }
  }
  .group-title{
    position: relative;
    padding: 0 16px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    font-weight: bold;
    color: #16BC83;
    &::after{
      content: '';
      position: absolute;
      left: 16px;
      right: 16px;
      bottom: 0;
      height: 1px;
      background: #D9DDE2;
      -webkit-transform: scaleY(0.5);
      transform: scaleY(0.5);
    }
    .icon-edit{
      width: 18px;
      // height: 12px;
    }
    .btn-green{
      padding: 0 12px;
      height: 32px;
      line-height: 32px;
      background: rgba(22, 188, 131, 0.12);
      border-radius: 8px;
      color: #16BC83;
      font-size: 12px;
      font-weight: bold;
      text-align: center;
    }
  }
.btn-more{
  color: #20CE92;
  font-size: 12px;
  text-align: center;
  padding: 10px 0;
  line-height: 1;
}
</style>
